<!-- Icon -->
<template>
<v-container>
  <v-row>
    <v-col cols="12">
      <v-btn  text href="https://material.io/tools/icons" target="_blank"><v-icon>link</v-icon> 更多Material Icons图标</v-btn>
    </v-col>
    <v-col>
      <v-text-field autofocus solo placeholder="搜索" v-model="iconName" clearable></v-text-field>
    </v-col>
  </v-row>
  <v-row>
    <v-col v-for="(icon,index) in iconItems" :key="index" cols="12" sm="6" md="3" lg="2" xl="1">
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <p class="text-xs-center text-truncate" v-on="on">
            <v-icon class="icon-item" large @click="handleClipboardIcon('.icon-item', icon.name)">
              {{ icon.name }}
            </v-icon>
            <br>
            <span class="text-truncate">{{ icon.name }}</span>
          </p>
        </template>
        <span >{{ icon.name }}</span>
      </v-tooltip>
    </v-col>
  </v-row>
  </v-container>
</template>
<script>
import handleClipboard from '@/utils/clipboard'
import IconList from './Icon.json'
export default {
  name: 'Icon',
  data: function () {
    return {
      iconName: '',
      icons: IconList.icons,
      iconItems: []
    }
  },
  watch: {
    iconName: function(newVal, oldVal) {
      this.iconFilter()
    }
  },
  created: function() {
    this.iconFilter()
  },
  methods: {
    handleClipboardIcon(target, text) {
      handleClipboard(target, text)
      this.$toasted.success('复制成功！')
    },
    iconFilter: function() {
      this.iconItems = this.icons.filter((icon) => {
        return icon.name.includes(this.iconName)
      })
    },
    onIconClick: function(icon) {}
  }
}
</script>
